<template>
  <div id="contentBody" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">在职培训情况</h3>
        <div class="box-tools pull-right">
          <el-button type="success" class="btn btn-success" v-if='isEditable' @click="()=>addVisible = true">
            <i class='fa fa-plus-square-o'>添加培训信息</i>
          </el-button>
        </div>
      </div>
      <div class="box-body">
        <section class="content" id="departEmployees">
          <div class="row">
            <el-table stripe :empty-text="emptyText" :highlight-current-row='true' :data="trainings" border style="width: 100%">
              <el-table-column type='index' label="序号" :width='80'></el-table-column>
              <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
              <el-table-column label="操作" width="320">
                <template scope="scope">
                      <el-button type="success" @click="view(scope.row)">
                        <i class="fa fa-eye">查看</i>
                      </el-button>
                      <el-button type="primary" v-if="isEditable" @click="editRow(scope.row)">
                        <i class="fa fa-edit">编辑</i>
                      </el-button>
                      <el-button type="warning" v-if="isEditable" @click="deleterow(index)">
                        <i class="fa fa-trash">删除</i>
                      </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>

      <el-dialog title="新增培训信息" :visible.sync="addVisible" :modal="false" size="small">
        <trainingForm v-if='addVisible' :editable='true' ref='addView'></trainingForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">关 闭</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="查看培训信息" :visible.sync="viewVisible" :modal="false" size="small">
        <trainingForm v-if='viewVisible' :training='editTraining' :editable='false' ref='ViewForm'></trainingForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑培训信息" :visible.sync="editVisible" :modal="false" size="small">
        <trainingForm v-if='editVisible' :training='editTraining' :editable='true' ref='editView'></trainingForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">关 闭</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from '../../mycomponents/common/MyDatePicker'
  import trainingForm from './trainingForm'
  import Utils from "../../../common/utils"
  let util = new Utils()
  export default {
    name: 'Traing',
    props: ['trainings', 'editable'],
    data: function() {
      return {
        emptyText: '空',
        isEditable: false,
        editVisible: false,
        viewVisible: false,
        addVisible: false,
        traingcategorylist: [],
        editTraining: {
          starttime: '',
          endtime: '',
          category: 1,
          traingname: '',
          agency: '',
          course: '',
          hours: 0,
          score: 100,
          comment: ''
        },
        columns: [{
            prop: "starttime",
            label: "起始时间",
            sortable: true,
            width: "142",
            formatter: util.dateFormater
          },
          {
            prop: "endtime",
            label: "结束时间",
            sortable: true,
            width: "101",
            formatter: util.dateFormater
          },
          {
            prop: "category",
            label: "培训类别",
            width: "101",
            sortable: true,
            formatter: this.getcategoryname
          },
          {
            prop: "traingname",
            label: "培训名称",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "agency",
            label: "主办单位",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "course",
            label: "学习内容",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "hours",
            label: "课时",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "score",
            label: "成绩",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "comment",
            label: "备注",
            width: "101",
            sortable: true,
            formatter: util.stringFormater
          }
        ]
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.traingcategorylist = this.$store.state.sysconfigs.categorylist
    },
    components: {
      MyDatePicker,
      trainingForm
    },
    methods: {
      getcategoryname(id) {
        for (var index in this.traingcategorylist) {
          if (this.traingcategorylist[index].id == id.category) {
            return this.traingcategorylist[index].name;
          }
        }
        return ''
      },
      getData() {
        return this.trainings
      },
      deleterow: function(index) {
        var that = this
        util.deleteConf(that,()=>{
          that.trainings.splice(index, 1)
        })
      },
      view(row) {
        this.editTraining = row
        this.viewVisible = true
      },
      editRow(row) {
        this.editTraining = row
        this.editVisible = true
      },
      add(e) {
        var newTraining = this.$refs.addView.getData()
        this.trainings.push(newTraining)
        this.addVisible = false
      },
      update(e) {
        var newTraining = this.$refs.editView.getData()
        this.editTraining = newTraining
        this.editVisible = false
      }
    }
  }
</script>

<style scoped>

</style>